<script lang="ts" setup>
import { ref, computed } from "vue";
import { userType } from "../../../utils/ts/user";
import { useUserStore } from "../../../utils/store/store";
import { useRouter } from "vue-router";

const store = useUserStore();
const userData = computed<userType | null>(() => store.getUser());

const props = defineProps(["total"]);

const total = computed(() => {
    return (
        props.total -
        (checked.value ? Number(userData.value?.wallet.balance || 0) : 0)
    );
});

const met = ref(1);
const checked = ref(false);

const router = useRouter();

const submit = () => {
    console.log("submit");
    router.push({
        // path: "/cart/payResult",
        name: "payResult",
        query: {
            success: "false",
        },
    });
};
</script>
<template>
  <div class="bg-white rounded mt-5 p-5 flex justify-between items-center">
    <div class="flex flex-col">
      <div class="flex items-center mb-4">
        <a-checkbox v-model:checked="checked">使用余额支付</a-checkbox>
        <span v-if="checked">
          您的账户余额为
          <em class="text-red-600 font-bold">
            {{ userData?.wallet.balance || "0" }}元
          </em>
        </span>
      </div>
      <a-radio-group v-model:value="met">
        <a-radio :value="1" checked>支付宝支付</a-radio>
        <a-radio :value="2">微信支付</a-radio>
      </a-radio-group>
    </div>

    <span>
      合计：
      <b class="text-red-600 text-1xl">{{ total }} 元</b>
    </span>
    <a-button type="primary" @click="submit">立即支付</a-button>
  </div>
</template>
<style lang="scss" scoped></style>
